<script setup>
import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

onMounted(() => {
  renderEcharts(flag.value ? option1.value : option2.value);
});

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);
// 总数据
const option1 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 30,
    bottom: 30,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)',
        width: 1,
        type: 'dashed',
      },
    },
  },
  xAxis: {
    nameTextStyle: {
      color: '#fff',
      padding: [5, 0, 0, 0],
    },
    data: [
      '登录人数',
      '登录人次',
      '协会数量',
      '发起活动数量',
      '累计点击量',
      '论坛发布量',
    ],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
      interval: 0,
      margin: 8,
    },
  },
  yAxis: {
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
      interval: 0,
      margin: 16,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      name: '数据',
      data: [100, 300, 400, 500, 200, 300],
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 6,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(0, 229, 255, 0.7)' },
            { offset: 1, color: 'rgba(0, 229, 255, 0.1)' },
          ],
        },
      },
      lineStyle: {
        width: 2,
        color: '#00e5ff',
      },
      emphasis: {
        lineStyle: {
          width: 3,
          shadowBlur: 15,
          shadowColor: 'rgba(0, 229, 255, 0.8)',
        },
        symbolSize: 8,
      },
    },
  ],
});

// 各二级组织的数据
const option2 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 30,
    bottom: 30,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)',
        width: 1,
        type: 'dashed',
      },
    },
  },
  legend: {
    data: ['组织A', '组织B', '组织C', '总数据'],
    textStyle: {
      color: '#fff',
      fontSize: 12,
    },
    top: 0,
    icon: 'roundRect',
    itemWidth: 12,
    itemHeight: 6,
    itemGap: 20,
  },
  xAxis: {
    nameTextStyle: {
      color: '#fff',
      padding: [5, 0, 0, 0],
    },
    data: [
      '登录人数',
      '登录人次',
      '协会数量',
      '发起活动数量',
      '累计点击量',
      '论坛发布量',
    ],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
      interval: 0,
      margin: 8,
    },
  },
  yAxis: {
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      name: '组织A',
      data: [120, 300, 10, 5, 1000, 50],
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 6,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(0, 255, 255, 0.7)' },
            { offset: 1, color: 'rgba(0, 255, 255, 0.1)' },
          ],
        },
      },
      lineStyle: {
        width: 2,
        color: '#00ffff',
      },
      emphasis: {
        lineStyle: {
          width: 3,
          shadowBlur: 15,
          shadowColor: 'rgba(0, 255, 255, 0.8)',
        },
        symbolSize: 8,
      },
    },
    {
      name: '组织B',
      data: [150, 400, 12, 8, 1200, 60],
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 6,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255, 0, 255, 0.7)' },
            { offset: 1, color: 'rgba(255, 0, 255, 0.1)' },
          ],
        },
      },
      lineStyle: {
        width: 2,
        color: '#ff00ff',
      },
      emphasis: {
        lineStyle: {
          width: 3,
          shadowBlur: 15,
          shadowColor: 'rgba(255, 0, 255, 0.8)',
        },
        symbolSize: 8,
      },
    },
    {
      name: '组织C',
      data: [180, 500, 15, 10, 1500, 70],
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 6,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(0, 255, 0, 0.7)' },
            { offset: 1, color: 'rgba(0, 255, 0, 0.1)' },
          ],
        },
      },
      lineStyle: {
        width: 2,
        color: '#00ff00',
      },
      emphasis: {
        lineStyle: {
          width: 3,
          shadowBlur: 15,
          shadowColor: 'rgba(0, 255, 0, 0.8)',
        },
        symbolSize: 8,
      },
    },
    {
      name: '总数据',
      data: [450, 1200, 37, 23, 3700, 180],
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 6,
      lineStyle: {
        width: 2,
        color: '#ff0000',
      },
      emphasis: {
        lineStyle: {
          width: 3,
          shadowBlur: 15,
          shadowColor: 'rgba(255, 0, 0, 0.8)',
        },
        symbolSize: 8,
      },
    },
  ],
});

// 切换状态
const flag = ref(true);
// 切换图表显示
const handleChange = () => {
  flag.value = !flag.value;
  renderEcharts(flag.value ? option1.value : option2.value);
};
</script>

<template>
  <dv-border-box-13 class="box">
    <div class="mb-2 flex items-center justify-between px-4">
      <h3 class="text-lg text-white">
        {{ flag ? '使用情况(全部)' : '使用情况(各级组织)' }}
      </h3>
      <div
        @click="handleChange"
        class="cursor-pointer text-center text-white transition-opacity duration-300 hover:opacity-80"
        style="height: 20px"
      >
        切换图表
      </div>
    </div>
    <EchartsUI
      ref="chartRef"
      class="w-full"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>
